<template>
  <div class="demo-page">
    <div class="demo-header">
      <h1>AI介绍区域演示</h1>
      <p>展示不同版本的AI能力介绍文案</p>
    </div>
    
    <!-- 版本选择器 -->
    <div class="version-selector">
      <el-radio-group v-model="selectedVersion" @change="handleVersionChange">
        <el-radio value="professional">专业简洁版</el-radio>
        <el-radio value="functional">功能突出版</el-radio>
        <el-radio value="service">服务导向版</el-radio>
      </el-radio-group>
    </div>
    
    <!-- AI介绍区域展示 -->
    <AIIntroSection :version="selectedVersion" :theme="selectedTheme" />
    
    <!-- 主题选择器 -->
    <div class="theme-selector">
      <h3>主题选择</h3>
      <el-radio-group v-model="selectedTheme">
        <el-radio value="gradient">渐变主题</el-radio>
        <el-radio value="light">浅色主题</el-radio>
        <el-radio value="dark">深色主题</el-radio>
      </el-radio-group>
    </div>
    
    <!-- 代码示例 -->
    <div class="code-example">
      <h3>使用方法</h3>
      <el-card>
        <pre><code>{{ codeExample }}</code></pre>
      </el-card>
    </div>
    
    <!-- 文案对比表格 -->
    <div class="comparison-table">
      <h3>文案版本对比</h3>
      <el-table :data="versionData" style="width: 100%">
        <el-table-column prop="version" label="版本" width="120" />
        <el-table-column prop="mainTitle" label="主标题（大字体）" />
        <el-table-column prop="subTitle" label="副标题（小字体）" />
        <el-table-column prop="description" label="适用场景" />
      </el-table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { ElRadioGroup, ElRadio, ElCard, ElTable, ElTableColumn } from 'element-plus'
import AIIntroSection from '../components/AIIntroSection.vue'

// 当前选择的版本和主题
const selectedVersion = ref<'professional' | 'functional' | 'service'>('professional')
const selectedTheme = ref<'gradient' | 'light' | 'dark'>('gradient')

// 版本切换处理
const handleVersionChange = (value: string | number | boolean | undefined) => {
  console.log('切换到版本:', value)
}

// 代码示例
const codeExample = computed(() => {
  return `<!-- 基础使用 -->
<AIIntroSection />

<!-- 指定版本和主题 -->
<AIIntroSection 
  version="${selectedVersion.value}" 
  theme="${selectedTheme.value}" 
/>

<!-- 在Vue组件中引入 -->
import AIIntroSection from '@/components/AIIntroSection.vue'`
})

// 版本对比数据
const versionData = [
  {
    version: '专业简洁版',
    mainTitle: '我是MatCreate AI，很高兴见到你！',
    subTitle: '我可以帮你设计材料、合成材料、解答问题，请把你的任务交给我吧',
    description: '友好亲切，突出AI身份和服务意愿'
  },
  {
    version: '功能突出版',
    mainTitle: '材料设计 · 智能合成 · 专业解答',
    subTitle: '让AI成为您的材料科学研究伙伴',
    description: '突出核心功能，简洁明了'
  },
  {
    version: '服务导向版',
    mainTitle: '材料科学全方位智能服务',
    subTitle: '设计 | 合成 | 分析 | 优化 - 一站式解决方案',
    description: '强调服务完整性，适合营销页面'
  }
]
</script>

<style lang="scss" scoped>
.demo-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.demo-header {
  text-align: center;
  margin-bottom: 2rem;
  
  h1 {
    color: #2c3e50;
    margin-bottom: 0.5rem;
  }
  
  p {
    color: #666;
    font-size: 1.1rem;
  }
}

.version-selector,
.theme-selector {
  margin: 2rem 0;
  padding: 1rem;
  background: #f8f9fa;
  border-radius: 8px;
  
  h3 {
    margin-bottom: 1rem;
    color: #2c3e50;
  }
}

.code-example {
  margin: 2rem 0;
  
  h3 {
    margin-bottom: 1rem;
    color: #2c3e50;
  }
  
  pre {
    background: #f8f9fa;
    padding: 1rem;
    border-radius: 4px;
    overflow-x: auto;
    
    code {
      font-family: 'Courier New', monospace;
      font-size: 0.9rem;
      color: #333;
    }
  }
}

.comparison-table {
  margin: 2rem 0;
  
  h3 {
    margin-bottom: 1rem;
    color: #2c3e50;
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .demo-page {
    padding: 1rem;
  }
  
  .version-selector,
  .theme-selector {
    padding: 0.8rem;
  }
}
</style>
